<template>
    <div class="pageContRight">
        <!--右边部分-->
        <div class="contBoxRight">
            <!--站内搜索-->
            <div class="headMould">
                <h3 class="headMouldIns">百度搜索</h3>
                <div class="search-wrap">
                    <input name="q" type="text" class="searchVal" v-model="keyWord" v-on:keyup="getSearch($event)" placeholder="百度搜索" autocomplete="off">
                    <Icon type="search" v-on:click="getSearchBtn"></Icon>
                </div>
            </div>
            <!--网页设计流程-->
            <div class="headMould">
                <h3 class="headMouldIns">网页设计流程</h3>
                <div class="webDesignBox">
                    <ul>
                        <li class="webDesignLis" v-for="wdCont in wdContLis" :key="wdCont.id">
                            <a v-bind:href="wdCont.Url" class="wdLisCont">{{wdCont.title}}</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!--热门推荐-->
            <hot-referral></hot-referral>
            <!-- 热门评论 -->
            <hot-review></hot-review>
        </div>
    </div>
</template>

<script>
import hotReferral from './../pageModule/hotReferral'
import hotReview from './../pageModule/hotReview'

/* 热门推荐(统一组件) */
export default {
  name: 'pageContRight',
  components: {
    hotReferral,
    hotReview
  },
  data: function () {
      return {
          wdContLis: '',
          keyWord: '' //搜索内容的初始化
      }
  },
  mounted () {
    this.$ajax.get('https://www.easy-mock.com/mock/590b372187cce4690feccdea/dongxin/webDesign').then(response => {
        // success callback  //右侧网站设计渲染数据
        this.wdContLis = response.data.data
    }, response => {
        // error callback
         alert('数据加载失败...')
    });
  },
  methods: {
      getSearch: function (ev){
          // 如果是回车键 就让他跳转对应的网址
          if (ev.keyCode==13) {
              window.open('https://www.baidu.com/s?wd='+this.keyWord);
              this.keyWord='';
          }
      },
      getSearchBtn: function (ev){
          if (this.keyWord) {
              window.open('https://www.baidu.com/s?wd='+this.keyWord);
              this.keyWord='';
          }
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>
